<script setup>
import {onMounted, ref, provide} from "vue";
import qs, {parse} from "qs";
import {ElMessage} from "element-plus";
import axiosInstance from "@/http";
import router from "@/router";
import MapContainer from "@/views/attendance/MapContainer.vue";

const childRef = ref(null);
provide('parent', {
    getValueFromChild: () => {
        saveManagementForm.value.latitude = childRef.value.childValue.lat;
        saveManagementForm.value.longitude = childRef.value.childValue.lng;
        saveManagementForm.value.address = childRef.value.childValue.address
        // console.log(childRef.value.childValue)
    }
});
const searchManagementForm = ref({
  name: '',
});
const managementList = ref([]);

const loadManagementList = () => {
  let data = qs.stringify(searchManagementForm.value);
    axiosInstance.get(BASE_URL+'/oa/attendance/management/list?' + data).then((response) =>{
    if(response.data.code === 20000){
      managementList.value = response.data.data;
      console.log(managementList.value);
      managementList.value.forEach(item => {
        if (item.monWorkingShift!==null){
          item.monWorkingShift=item.monWorkingShift.checkInTime +'-'+ item.monWorkingShift.checkOutTime
        }else {item.monWorkingShift='休息'}
        if (item.tueWorkingShift!==null){
          item.tueWorkingShift=item.tueWorkingShift.checkInTime +'-'+ item.tueWorkingShift.checkOutTime
        }else {item.tueWorkingShift='休息'}
        if (item.wedWorkingShift!==null){
          item.wedWorkingShift=item.wedWorkingShift.checkInTime +'-'+ item.wedWorkingShift.checkOutTime
        }else {item.wedWorkingShift='休息'}
        if (item.thuWorkingShift!==null){
          item.thuWorkingShift=item.thuWorkingShift.checkInTime +'-'+ item.thuWorkingShift.checkOutTime
        }else {item.thuWorkingShift='休息'}
        if (item.friWorkingShift!==null){
          item.friWorkingShift=item.friWorkingShift.checkInTime +'-'+ item.friWorkingShift.checkOutTime
        }else {item.friWorkingShift='休息'}
        if (item.satWorkingShift!==null){
          item.satWorkingShift=item.satWorkingShift.checkInTime +'-'+ item.satWorkingShift.checkOutTime
        }else {item.satWorkingShift='休息'}
        if (item.sunWorkingShift!==null){
          item.sunWorkingShift=item.sunWorkingShift.checkInTime +'-'+ item.sunWorkingShift.checkOutTime
        }else {item.sunWorkingShift='休息'}
      })
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const dialogTitle = ref('')
const dialogVisible = ref(false)
const handleClose = () =>{
    if (confirm('确定要关闭此弹窗?')){
        dialogVisible.value = false;
        workingShiftParam.value.mon.id = ''
        workingShiftParam.value.mon.workingTime = ''
        workingShiftParam.value.tue.id = ''
        workingShiftParam.value.tue.workingTime = ''
        workingShiftParam.value.wed.id = ''
        workingShiftParam.value.wed.workingTime = ''
        workingShiftParam.value.thu.id = ''
        workingShiftParam.value.thu.workingTime = ''
        workingShiftParam.value.fri.id = ''
        workingShiftParam.value.fri.workingTime = ''
        workingShiftParam.value.sat.id = ''
        workingShiftParam.value.sat.workingTime = ''
        workingShiftParam.value.sun.id = ''
        workingShiftParam.value.sun.workingTime = ''
        saveManagementForm.value = {
            /** 考勤管理组名 */
            name: '',
            //地址信息
            address: '',
            //纬度
            latitude: '',
            //经度
            longitude: '',
            //标题
            title: '',
            /** 班次id */
            workingShiftId: '',
            workingClassList: [],
            //是否支持外部打卡
            enableOutsideCheck: false,
            //是否需要拍照
            enableOutsideCameraCheck: false,
            //考勤负责人Id
            userId: '',
            //网络物理地址
            macAddr: '',
            //网络名称
            ssid: '',
            //是否需要人脸识别
            enableFaceCheck: false,
            //禁用休息时间打卡
            disableCheckWhenRest: false,
            //参与考勤人员oa用户id
            userList: []
        }
        showIcon.value = false;
    }
}
const addManagement = () =>{
  dialogTitle.value = '新建考勤组管理';
  dialogVisible.value = true;
}


const userDialogVisible = ref(false)

const userDialogHandleClose = () =>{
    if (confirm('确定要关闭此弹窗?')) {
        userDialogVisible.value = false;
        saveManagementForm.value.userList = [];
    }
}
const UserTableDate = ref([])
const searchUserForm = ref({
    username: '',
    email: '',
    phone: '',
    departmentId: '',
    positionId: '',
    status: '',
    createBy: '',
    updateBy: ''
});
const getUserList = () =>{
    axiosInstance.post('/oa/user/userlist', searchUserForm.value).then(response => {
        console.log("获取用户列表response", response);
        if (response.data.code === 4200 || response.data.code === 4201) {
            router.push('/login');
        }
        if (response.data.code === 20000) {
            UserTableDate.value = response.data.data;
            console.log(UserTableDate.value);
        } else {
            ElMessage.error(response.data.msg);
        }
    });
}
const addUserList = () =>{
    userDialogVisible.value = true;
    getUserList();
}
const saveUserList = () =>{
    userDialogVisible.value = false
    console.log(saveManagementForm.value.userList)
}

const handleSelectionChange = (val) =>{
    saveManagementForm.value.userList = val.map(row => row.id);
}

const workingShiftParam = ref({
    mon: {id: '', workingTime: ''},
    tue: {id: '', workingTime: ''},
    wed: {id: '', workingTime: ''},
    thu: {id: '', workingTime: ''},
    fri: {id: '', workingTime: ''},
    sat: {id: '', workingTime: ''},
    sun: {id: '', workingTime: ''}
})


const workingShiftList = ref([])

const searchWorkingShift = ref(
    {name: '',}
)

const workShiftDialogVisible = ref(false)

const getWorkingShiftList = ()=>{
    let data = qs.stringify(searchWorkingShift.value);
    axiosInstance.get("/oa/attendance/workingShift/list?" + data).then((response) => {
        if (response.data.code === 20000) {
            workingShiftList.value = response.data.data;
            console.log(workingShiftList.value);
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}
const jug = ref();
const bindWorkingShift = (val) =>{
    jug.value = val;
    getWorkingShiftList()
    workShiftDialogVisible.value = true
}
const saveBind = (id) =>{
    workingShiftList.value.forEach(item => {
        if (item.id === id){
            if (jug.value === 'mon'){
                workingShiftParam.value.mon.id = item.id
                workingShiftParam.value.mon.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
            }else if (jug.value === 'tue'){
                workingShiftParam.value.tue.id = item.id
                workingShiftParam.value.tue.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
            }else if (jug.value === 'wed'){
                workingShiftParam.value.wed.id = item.id
                workingShiftParam.value.wed.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
            }else if (jug.value === 'thu'){
                workingShiftParam.value.thu.id = item.id
                workingShiftParam.value.thu.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
           }else if (jug.value === 'fri'){
                workingShiftParam.value.fri.id = item.id
                workingShiftParam.value.fri.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
            }else if (jug.value === 'sat'){
                workingShiftParam.value.sat.id = item.id
                workingShiftParam.value.sat.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
            }else if (jug.value === 'sun'){
                workingShiftParam.value.sun.id = item.id
                workingShiftParam.value.sun.workingTime = item.name + ': ' + item.checkInTime + '-' + item.checkOutTime
            }

        }
    })
    workShiftDialogVisible.value = false
}
const workShiftDialogHandleClose = () =>{
    if (confirm('确定要关闭此弹窗?')){
        if (jug.value === 'mon'){
            workingShiftParam.value.mon.id = ''
            workingShiftParam.value.mon.workingTime = ''
        }else if (jug.value === 'tue'){
            workingShiftParam.value.tue.id = ''
            workingShiftParam.value.tue.workingTime = ''
        }else if (jug.value === 'wed'){
            workingShiftParam.value.wed.id = ''
            workingShiftParam.value.wed.workingTime = ''
        }else if (jug.value === 'thu'){
            workingShiftParam.value.thu.id = ''
            workingShiftParam.value.thu.workingTime = ''
        }else if (jug.value === 'fri'){
            workingShiftParam.value.fri.id = ''
            workingShiftParam.value.fri.workingTime = ''
        }else if (jug.value === 'sat'){
            workingShiftParam.value.sat.id = ''
            workingShiftParam.value.sat.workingTime = ''
        }else if (jug.value === 'sun'){
            workingShiftParam.value.sun.id = ''
            workingShiftParam.value.sun.workingTime = ''
        }
        workShiftDialogVisible.value = false;
    }
}
const showIcon = ref(false)

const getManagementInfo = (id) =>{
    axiosInstance.get('/oa/attendance/management/getInfo/'+ id).then(response => {
        if (response.data.code === 20000){
            saveManagementForm.value = response.data.data;
            console.log(saveManagementForm.value);
            if (saveManagementForm.value.monWorkingShift !== null){
                workingShiftParam.value.mon.id = saveManagementForm.value.monWorkingShift.id;
                workingShiftParam.value.mon.workingTime = saveManagementForm.value.monWorkingShift.name + ': ' + saveManagementForm.value.monWorkingShift.checkInTime + '-' + saveManagementForm.value.monWorkingShift.checkOutTime;
            }
            if (saveManagementForm.value.tueWorkingShift !== null){
                workingShiftParam.value.tue.id = saveManagementForm.value.tueWorkingShift.id;
                workingShiftParam.value.tue.workingTime = saveManagementForm.value.tueWorkingShift.name + ': ' + saveManagementForm.value.tueWorkingShift.checkInTime + '-' + saveManagementForm.value.tueWorkingShift.checkOutTime;
            }
            if (saveManagementForm.value.wedWorkingShift !== null){
                workingShiftParam.value.wed.id = saveManagementForm.value.wedWorkingShift.id;
                workingShiftParam.value.wed.workingTime = saveManagementForm.value.wedWorkingShift.name + ': ' + saveManagementForm.value.wedWorkingShift.checkInTime + '-' + saveManagementForm.value.wedWorkingShift.checkOutTime;
            }
            if (saveManagementForm.value.thuWorkingShift !== null){
                workingShiftParam.value.thu.id = saveManagementForm.value.thuWorkingShift.id;
                workingShiftParam.value.thu.workingTime = saveManagementForm.value.thuWorkingShift.name + ': ' + saveManagementForm.value.thuWorkingShift.checkInTime + '-' + saveManagementForm.value.thuWorkingShift.checkOutTime;
            }
            if (saveManagementForm.value.friWorkingShift !== null){
                workingShiftParam.value.fri.id = saveManagementForm.value.friWorkingShift.id;
                workingShiftParam.value.fri.workingTime = saveManagementForm.value.friWorkingShift.name + ': ' + saveManagementForm.value.friWorkingShift.checkInTime + '-' + saveManagementForm.value.friWorkingShift.checkOutTime;
            }
            if (saveManagementForm.value.satWorkingShift !== null){
                workingShiftParam.value.sat.id = saveManagementForm.value.satWorkingShift.id;
                workingShiftParam.value.sat.workingTime = saveManagementForm.value.satWorkingShift.name + ': ' + saveManagementForm.value.satWorkingShift.checkInTime + '-' + saveManagementForm.value.satWorkingShift.checkOutTime;
            }
            if (saveManagementForm.value.sunWorkingShift !== null){
                workingShiftParam.value.sun.id = saveManagementForm.value.sunWorkingShift.id;
                workingShiftParam.value.sun.workingTime = saveManagementForm.value.sunWorkingShift.name + ': ' + saveManagementForm.value.sunWorkingShift.checkInTime + '-' + saveManagementForm.value.sunWorkingShift.checkOutTime;
            }





            dialogTitle.value = '考勤组详情';
            dialogVisible.value = true;
        }
    })
}
const saveManagementForm = ref({
    /** 考勤管理组名 */
    name: '',
    //地址信息
    address: '',
    //纬度
    latitude: '',
    //经度
    longitude: '',
    //标题
    title: '',
    /** 班次id */
    workingShiftId: '',
    workingClassList: [],
    //是否支持外部打卡
    enableOutsideCheck: false,
    //是否需要拍照
    enableOutsideCameraCheck: false,
    //考勤负责人Id
    userId: '',
    //网络物理地址
    macAddr: '',
    //网络名称
    ssid: '',
    //是否需要人脸识别
    enableFaceCheck: false,
    //禁用休息时间打卡
    disableCheckWhenRest: false,
    //参与考勤人员oa用户id
    userList: []
})
const saveManagement = () => {
    if (saveManagementForm.value.name === ''){
        ElMessage.error("考勤组名称不能为空");
        return;
    }
    if (workingShiftParam.value.sun.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.sun.id)
    }else saveManagementForm.value.workingClassList.push(0);
    if (workingShiftParam.value.mon.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.mon.id)
    }else saveManagementForm.value.workingClassList.push(0);
    if (workingShiftParam.value.tue.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.tue.id)
    }else saveManagementForm.value.workingClassList.push(0);
    if (workingShiftParam.value.wed.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.wed.id)
    }else saveManagementForm.value.workingClassList.push(0);
    if (workingShiftParam.value.thu.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.thu.id)
    }else saveManagementForm.value.workingClassList.push(0);
    if (workingShiftParam.value.fri.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.fri.id)
    }else saveManagementForm.value.workingClassList.push(0);
    if (workingShiftParam.value.sat.id !== ''){
        saveManagementForm.value.workingClassList.push(workingShiftParam.value.sat.id)
    }else saveManagementForm.value.workingClassList.push(0);
    console.log(saveManagementForm.value.workingClassList)
    let data = qs.stringify(saveManagementForm.value)
    console.log("data:",data)
    axiosInstance.post("/oa/attendance/management/add", data).then(response => {
        if (response.data.code === 20000) {
            ElMessage.success("添加成功");
            dialogVisible.value = false;
        } else {
            ElMessage.error(response.data.msg);
        }
    })
    saveManagementForm.value = {
        /** 考勤管理组名 */
        name: '',
        //地址信息
        address: '',
        //纬度
        latitude: '',
        //经度
        longitude: '',
        //标题
        title: '',
        /** 班次id */
        workingShiftId: '',
        workingClassList: [],
        //是否支持外部打卡
        enableOutsideCheck: false,
        //是否需要拍照
        enableOutsideCameraCheck: false,
        //考勤负责人Id
        userId: '',
        //网络物理地址
        macAddr: '',
        //网络名称
        ssid: '',
        //是否需要人脸识别
        enableFaceCheck: false,
        //禁用休息时间打卡
        disableCheckWhenRest: false,
        //参与考勤人员oa用户id
        userList: []
    }
    workingShiftParam.value = {
        mon: {id: '', workingTime: ''},
        tue: {id: '', workingTime: ''},
        wed: {id: '', workingTime: ''},
        thu: {id: '', workingTime: ''},
        fri: {id: '', workingTime: ''},
        sat: {id: '', workingTime: ''},
        sun: {id: '', workingTime: ''}
    }
}

onMounted(()=>{
  loadManagementList();
})
</script>

<template>
  <div class="user-management">
    <header class="header">
      <span class="title">考勤组管理</span>
      <el-button type="primary" @click="addManagement">新建考勤组管理</el-button>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    </header>

<!--      添加考勤人员弹窗-->
      <el-dialog
              title="添加考勤人"
              v-model="userDialogVisible"
              :before-close="userDialogHandleClose"
              width="300px"
      >
          <div>
              <h2>选择人员</h2>
              <el-input placeholder="请输入姓名" v-model="searchUserForm.username" @change="getUserList"></el-input>
              <el-table :data="UserTableDate" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" />

                  <el-table-column property="username" label="姓名" width="120" />
              </el-table>
          </div>
          <template #footer>
              <el-button @click="userDialogHandleClose">取消</el-button>
              <el-button @click="saveUserList">保存</el-button>
          </template>
      </el-dialog>

<!--      更改班次窗口-->
      <el-dialog
              title="更改班次"
              v-model="workShiftDialogVisible"
              :before-close="workShiftDialogHandleClose"
              width="500px"
      >
          <div>
              <h2>选择班次</h2>
              <el-input placeholder="请输入班次名称" v-model="searchWorkingShift.name" @change="getWorkingShiftList"></el-input>
              <el-table :data="workingShiftList" style="width: 100%" @selection-change="">
                  <el-table-column prop="name" label="班次名称" align="center"/>
                  <el-table-column prop="checkInTime" label="上班时间" align="center"/>
                  <el-table-column prop="checkOutTime" label="下班时间" align="center"/>
                  <el-table-column label="操作" align="center">
                      <template #default="scope">
                          <el-button link type="primary" size="small" @click="saveBind(scope.row.id)">选择</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </div>

      </el-dialog>


      <!--新建弹窗-->
      <el-dialog
              :title="dialogTitle"
              v-model="dialogVisible"
              class="user-dialog"
              :before-close="handleClose"
      >
      <el-form label-position="top" class="dialog-form">

          <el-row :gutter="10">
              <el-col :span="12">
                  <el-form-item label="考勤组名称">
                      <el-input placeholder="请输入考勤组名称" v-model="saveManagementForm.name"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>

          <el-row :gutter="10">
                  <el-form-item label="考勤人员">
                      <el-tag type="primary">{{ saveManagementForm.userList.length }}人</el-tag>
                      <el-button link type="primary"  @click="addUserList">设置</el-button>
                  </el-form-item>

          </el-row>

          <h4>工作日设置</h4>
          <el-form-item label="星期一">
              <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.mon.workingTime" />
              <el-button link type="primary" size="small" @click="bindWorkingShift('mon')">更改班次</el-button>
          </el-form-item>
            <el-form-item label="星期二">
                <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.tue.workingTime" />
                <el-button link type="primary" size="small" @click="bindWorkingShift('tue')">更改班次</el-button>
            </el-form-item>
          <el-form-item label="星期三">
              <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.wed.workingTime" />
              <el-button link type="primary" size="small" @click="bindWorkingShift('wed')">更改班次</el-button>
          </el-form-item>
          <el-form-item label="星期四">
              <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.thu.workingTime" />
              <el-button link type="primary" size="small" @click="bindWorkingShift('thu')">更改班次</el-button>
          </el-form-item>
                <el-form-item label="星期五">
                    <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.fri.workingTime" />
                    <el-button link type="primary" size="small" @click="bindWorkingShift('fri')">更改班次</el-button>
          </el-form-item>
          <el-form-item label="星期六">
              <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.sat.workingTime" />
              <el-button link type="primary" size="small" @click="bindWorkingShift('sat')">更改班次</el-button>
          </el-form-item>
          <el-form-item label="星期日">
              <el-input readonly placeholder="休息" style="width: 300px" v-model="workingShiftParam.sun.workingTime" />
              <el-button link type="primary" size="small" @click="bindWorkingShift('sun')">更改班次</el-button>
          </el-form-item>

          <h4>添加办公Wi-Fi</h4>
          <el-form-item label="Wi-Fi名称">
              <el-input placeholder="请输入网络名称" v-model="saveManagementForm.ssid"></el-input>
          </el-form-item>
          <el-form-item label="MAC地址">
              <el-input placeholder="例如：D8:9E:F3:03:F3:8E" v-model="saveManagementForm.macAddr"></el-input>
          </el-form-item>

          <h4>添加打卡地点</h4>
          <el-form-item label="地址标题">
              <el-input v-model="saveManagementForm.title"></el-input>
          </el-form-item>
          <el-form-item label="地址信息">
              <el-input v-model="saveManagementForm.address"></el-input>
          </el-form-item>
          <el-row :gutter="10">
              <el-col :span="12">
                  <el-form-item label="经度">
                      <el-input readonly v-model="saveManagementForm.longitude"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="纬度">
                      <el-input readonly v-model="saveManagementForm.latitude"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <div id="container"><MapContainer ref="childRef"></MapContainer></div>

          <el-row :gutter="10">
              <el-col :span="12">
                  更多选项
                  <el-icon v-show="!showIcon" @click="showIcon=true"><ArrowDown /></el-icon>
                  <el-icon v-show="showIcon" @click="showIcon=false"><ArrowUp /></el-icon>
              </el-col>
          </el-row>
          <el-row v-show="showIcon" :gutter="10">
              <el-checkbox label="允许外勤打卡" v-model="saveManagementForm.enableOutsideCheck"></el-checkbox>
          </el-row>
          <el-row v-show="showIcon" :gutter="10">
              <el-checkbox label="开启外勤拍照打卡" v-model="saveManagementForm.enableOutsideCameraCheck"></el-checkbox>
          </el-row>
          <el-row v-show="showIcon" :gutter="10">
              <el-checkbox label="开启人脸识别打卡" v-model="saveManagementForm.enableFaceCheck"></el-checkbox>
          </el-row>
          <el-row v-show="showIcon" :gutter="10">
              <el-checkbox label="开启休息时间打卡" v-model="saveManagementForm.disableCheckWhenRest"></el-checkbox>
          </el-row>
      </el-form>

          <template #footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="saveManagement">保存</el-button>
          </template>
      </el-dialog>



      <!--搜索卡片-->
    <el-card class="search-card">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item label="考勤组名称" >
          <el-input placeholder="请输入考勤组名称" v-model="searchManagementForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadManagementList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--查询列表-->
    <el-card>
      <el-table class="user-table" :data="managementList">
          <el-table-column type="index" label="编号" width="80" align="center"/>
          <el-table-column prop="name" label="名称" align="center"/>
        <el-table-column prop="monWorkingShift" label="星期一" align="center"></el-table-column>
        <el-table-column prop="tueWorkingShift" label="星期二" align="center"></el-table-column>
        <el-table-column prop="wedWorkingShift" label="星期三" align="center"></el-table-column>
        <el-table-column prop="thuWorkingShift" label="星期四" align="center"></el-table-column>
        <el-table-column prop="friWorkingShift" label="星期五" align="center"></el-table-column>
        <el-table-column prop="satWorkingShift" label="星期六" align="center"></el-table-column>
        <el-table-column prop="sunWorkingShift" label="星期日" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="getManagementInfo(scope.row.id)">查看</el-button>
            <el-button link type="danger" size="small" @click="">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<style scoped>
.user-management {
  padding: 20px;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.user-dialog {
  width: 500px;
  padding: 30px;
  display: flex;
  align-items: center;
}

.dialog-form {
  max-width: 750px;
}

.search-card {
  margin: 20px 0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-input {
  width: 200px;
}

.user-table {
  border-radius: 5px;
  overflow: hidden;
}

.user-table .el-table th {
  background-color: #eaeaea;
}

.reset-button {
  margin-right: 10px;
}
</style>